<template>
  <div class="home">
    <div class="card_header">
      <el-row :gutter="10">
        <br /><br />
        <el-col :span="3">卡号头部:</el-col>
        <el-col :span="6"
          ><el-input
            placeholder="按卡号头部查询"
            v-model="input3"
            class="input-with-select"
          ></el-input
        ></el-col>
      </el-row>
    </div>
    <div class="cardadd">
      <el-button type="primary" @click="dialogFormVisible = true" class="icon"
        >+ 添加卡号</el-button
      >
      <h4>归属:</h4>
      <el-radio-group v-model="queryCardType" @change="checkoutCardType">
        <el-radio :label="1">大客户</el-radio>
        <el-radio :label="2">代理</el-radio>
      </el-radio-group>
      <!-- <el-radio v-model="radio" label="1" >大客户</el-radio>
      <el-radio v-model="radio" label="2">代理</el-radio> -->
      <div class="btnr">
        <el-button
          type="primary"
          icon="el-icon-search"
          class="icons"
          @click="searchByCardId"
          >搜索</el-button
        >
        <el-button type="reset" icon="el-icon-refresh-right" class="icons"
          >重置</el-button
        >
      </div>
    </div>

    <el-table
      :data="
        tabledata.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
    >
      <el-table-column prop="id" label="卡号" width></el-table-column>
      <el-table-column
        prop="card_header"
        label="卡号头部"
        width
      ></el-table-column>
      <el-table-column prop="card_type" label="卡类型" width></el-table-column>
      <el-table-column prop="affiliation" label="归属" width></el-table-column>
      <el-table-column prop label="操作" width>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="handleEdit = true"
            style="width: 50px; height: 40px; padding-left: 10px"
            >编辑</el-button
          >
          <el-button
            @click="deleteById(scope.row.productsId)"
            style="width: 50px; height: 40px; padding-left: 10px"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[4, 8]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tabledata.length"
    >
    </el-pagination>

    <el-dialog
      title="添加新的卡号"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form :model="addData">
        <el-form-item label="卡号头部" :label-width="formLabelWidth">
          <el-input v-model="addData.cardId"></el-input>
        </el-form-item>
        <el-form-item label="卡类型" :label-width="formLabelWidth">
          <el-input v-model="addData.productsNum"></el-input>
        </el-form-item>
        <el-form-item label="卡归属" :label-width="formLabelWidth">
          <el-input v-model="addData.categoryId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addpros">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="handleEdit" width="50%">
      <div>
        <span class="">请输入新的卡号头部</span>
      </div>
      <div>
        <el-form :model="addData">
          <el-form-item label="">
            <br />
            <el-input
              style="width: 200px"
              v-model="addData.cardId"
              :label-width="formLabelWidth"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="addpros">确 定</el-button> -->
        <el-button @click="handleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "home",
  data() {
    return {
      queryCardType: 1, //查询订单类型
      input3: "",
      radio: "1",
      currentPage: 1, // 默认开始页面
      pagesize: 4,
      total: 0,
      tabledata: [
        {
          id: "",
          card_header: "",
          card_type: "虚拟卡",
          affiliation: "大客户",
        },
      ],
      addData: {
        productsNum: "",
        categoryId: "",
        categoryTag: [],
        productsName: "",
      },
      dialogFormVisible: false,
      handleEdit: false,
      formLabelWidth: "200px",
    };
  },
  //生成时触发
  created() {
    //加载初始数据
    this.getInitData();
  },
  methods: {
    async checkoutCardType() {
      //转换queryOrderType
      var queryCardType =
        this.queryCardType == 1
          ? "大客户"
          : this.queryCardType == 2
          ? "合伙人"
          : "";
      console.log(queryCardType);
      const {data:res} = await this.$axios.post('findCardNumber',{
        affiliation:queryCardType
      });
      console.log(res);
      this.tabledata = res.data;
    },
    //通过卡号查询
    async searchByCardId() {
      const { data: res } = await this.$axios.post("findCardNumber", {
        card_header: this.input3,
      });
      console.log(res.data);
      this.tabledata = res.data;
    },
    //分页
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(`当前页: ${currentPage}`);
    },
    //获取初始数据
    getInitData() {
      var _this = this;
      //登陆成功之后get获取接口数据
      axios
        .get("http://47.108.201.43:3000/api/getCardNumber", {
          //   params: {
          //     pageNum: 5,
          //     pageSize: 300
          //   }
        })
        .then(function (res) {
          if (res.data.cood == 200) {
            console.log("获取数据");
            _this.$message.success("数据已获取到！");
          }
          _this.tabledata = res.data.data;
          //   console.log(_this.tabledata);
          console.log(res);
        });
    },
    addpros() {
      var _this = this;
      axios
        .post("http://47.110.234.216:7001/add-pros", {
          productsNum: this.addData.productsNum,
          categoryId: this.addData.categoryId,
          categoryTag: this.addData.categoryTag,
          productsName: this.addData.productsName,
        })
        .then(function (res) {
          console.log("数据已被接收");
          console.log(res);
          _this.dialogFormVisible = false;
          _this.dialogForm = false;
          _this.getInitData();
        });
    },
    deleteById(cardId) {
      var _this = this;
      console.log(cardId);
      axios
        .delete("http://47.110.234.216:7001/delete-pros", {
          productsId: this.cardId,
        })
        .then(function (res) {
          _this.$message.success("删除成功！");
          console.log("删除成功！");
          console.log(res);
          _this.getInitData();
        });
    },
  },
};
</script>

<style >
body {
  background: #f9f9f9;
}
.card_header {
  text-align: left;
  height: 100px;
  margin-left: 10%;
}
.home {
  width: 80%;
  text-align: center;
  margin-left: 10%;
}
h2 {
  display: inline-block;
  width: 120px;
}
.el-input {
  width: 200px;
  text-align: center;
}
.cardadd {
  margin-bottom: 30px;
  text-align: left;
  margin-left: 10%;
}
h4 {
  display: inline-block;
  width: 50px;
  margin-left: 30px;
}
.icons {
  background-color: #f9f9f9;
  color: black;
  border: 1px solid #787878;
  width: 70px;
  padding: 10px;
}

.icon {
  background-color: #f9f9f9;
  color: black;
  border: 1px solid #787878;
}
.spancon {
  display: inline-block;
}
.block {
  height: 70px;
  margin-top: 25px;
}
.btnr {
  display: inline-block;
}
</style>